<template>
  <div class="Toppadding Allpadding">
      <my-head title="我的" :back='false'></my-head>
      <div class="mineBack">
          <div class="mineHead">
            <img src="@/assets/image/xiaoxin_4.jpg" alt="">
          </div>
             <h2 class="loginName" v-if="userInfo">
                  {{ userInfo.phone }}
            </h2>
            <h2 class="loginName" v-else @click="gotoWhere({ name: 'login' })">
                    立即登录
            </h2>
      </div>
      <div class="mineAll">
        <ul>
            <li>
              <div class="minAll1" @click="gotoShopCar">
                <van-icon name="shopping-cart" color="#fb7299" size="50"/>
                <p>我的购物车</p>
              </div>
            </li>
            <li>
              <div class="minAll1" @click="gotoLike">
                <van-icon name="like" color="#fb7299" size="50"/>
                <p>我的喜欢</p>
              </div>
            </li>
            <li @click="changepass">
              <div class="minAll1">
                <van-icon name="clear" color="#fb7299" size="50"/>
                <p >修改密码</p>
              </div>
            </li>
            <li @click="logouAction">
              <div class="minAll1">
                <van-icon name="delete" color="#fb7299" size="50"/>
                <p >退出登录</p>
              </div>
            </li>
        </ul>
      </div>
  </div>
</template>

<script>
import { Notify } from 'vant';
export default {
methods: {
  logouAction(){
    if(this.userInfo){
     this.$dialog.confirm({
                title: '操作提示',
                message: '你真的要退出登录吗?',
            })
            .then(() => {
                this.changeUserInfo(null)
               this.$router.push({
                 name:'login'
               })
            }).catch(() => {
                console.log(1);
            })
            
            }else{
                Notify({ type: 'danger', message: '请先登录' });
            }
        },
        changepass(){
          if(this.userInfo){
           this.$router.push({
                 name:'changepass'
               })
          }
          else{
            Notify({ type: 'danger', message: '请先登录' });
          }
        },
        gotoLike(){
           this.$router.push({
                 name:'like'
               })
        },
        gotoShopCar(){
          this.$router.push({
                 name:'shopCar'
               })
        }
},
}
</script>

<style>
.mineBack{
  width: 100%;
  height: 120px;
  border-radius: 20px;
   background-image: radial-gradient(circle,#fb7299 , rgb(248, 248, 133) , #fb7299  );
   box-shadow: 0px 3px 10px #f5f5f5;
   position: relative;
   margin-top: 50px;
    box-shadow: 2px 2px 5px #c5c4c4;
}
.mineHead{
  height: 100px;
  width: 100px;
  border-radius: 50%;
  background: white;
  position: absolute;
  top: -50px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0px 5px 10px #333;
}
.mineHead img{
  height: 90px;
  width: 90px;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  border-radius:50% ;
  background: pink;
  overflow: hidden;
}
.loginName{
  position: absolute;
  top: 50%;
  text-align: center;
  width: 100%;
}
.mineAll{
  width: 100%;
  height: 375px;
 
  margin-top: 20px;

}
.mineAll ul{
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: space-between;
  flex-wrap: wrap;

}
.mineAll li{
  width: 48%;
  height: 48%;
  background: white;
  border-radius: 20px;
  box-shadow: 2px 2px 5px #c5c4c4;
  position: relative;

}
.minAll1{
  position: absolute;
  left: 0;
  bottom: 0;
  top: 0;
  right: 0;
  margin: auto;
  font-size: 20px;
  width: 100px;
  height: 100px;
  color: #fb7299;
  text-align: center;
}
</style>